<template>
  <div class="home" ref="shangping" id="shangping">
    <div class="lunbo"><lun-bo></lun-bo></div>
    <!-- <div class="lunbo2"><lun-bo-2></lun-bo-2></div> -->
    <!-- 筛选 -->
    <div class="shaixuan" ref="shaixuan">
      <ul>
        <li
          v-for="(item, index) in shaixuan"
          :key="index"
          @click="shaiuantiaojian(item.tiaojian), (on = index)"
          :class="on == index ? 'active' : ''"
        >
          <h5>{{ item.title }}</h5>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>

    <!-- 商品页 -->
    <div class="shangping" ref="shangping2">
      <!-- 加载 -->
      <div class="jiazai" v-if="jiazai">{{ zhuangtai }}</div>
      <div class="left">
        <ul>
          <li
            v-for="item in list1"
            :key="item.proid"
            @click="jinru(item.proid)"
          >
            <dl>
              <dt>
                <img :src="item.img1" alt="" />
              </dt>
              <dd>
                <h5>
                  {{ item.proname }}
                </h5>
                <!-- <p>{{ item.category }}</p> -->
                <h4>¥{{ item.originprice }}</h4>
                <div>
                  <span>销售数量:{{ item.sales }}</span>
                  <span class="miaosha" v-show="item.isseckill">秒杀</span>
                </div>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li
            v-for="item in list2"
            :key="item.proid"
            @click="jinru(item.proid)"
          >
            <dl>
              <dt>
                <img :src="item.img1" alt="" />
              </dt>
              <dd>
                <h5>
                  {{ item.proname }}
                </h5>
                <!-- <p>{{ item.category }}</p> -->
                <h4>¥{{ item.originprice }}</h4>
                <div>
                  <span>销售数量:{{ item.sales }}</span>
                  <span class="miaosha" v-show="item.isseckill">秒杀</span>
                </div>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
    <jia-zai v-show="jiazaizhong"> </jia-zai>
  </div>
</template>

<script>
import lunBo from "@/components/lunBo.vue";
import lunBo2 from "@/components/lunBo2.vue";
import { set } from "vue";
import JiaZai from "@/components/jiaZai.vue";
export default {
  components: { lunBo, lunBo2, JiaZai },
  data() {
    return {
      //商品列表
      list1: [],
      list2: [],
      pageindex: 1,
      pagesize: 20,
      zhuangtai: "加载中...",
      jiazai: false,
      on1: true,
      shaixuan: [
        { title: "全部", name: "猜你喜欢", tiaojian: "proname" },
        { title: "折扣", name: "打折", tiaojian: "discount" },
        { title: "推介", name: "好东西", tiaojian: "isrecommend" },
        { title: "大减价", name: "贱贱贱", tiaojian: "issale" },
        { title: "秒杀", name: "一秒没", tiaojian: "isseckill" },
        { title: "好物", name: "太好了", tiaojian: "sales" },
      ],
      shaixuanlist: null,
      on: 0,
      paixuxiala: false,
      jiazaizhong: false,
    };
  },
  methods: {
    //获取商品列表
    getList() {
      this.jiazai = true;
      let params = {
        count: this.pageindex,
        limitNum: this.pagesize,
      };
      axios.get("http://121.89.205.189:3000/api/pro/list", { params }).then(
        (res) => {
          if (res.data.code == 200) {
            this.list = res.data.data;
            this.list1 = this.list.slice(0, Math.floor(this.list.length / 2));
            this.list2 = this.list.slice(Math.ceil(this.list.length / 2));
          }
        },
        (rej) => {
          this.zhuangtai = "网络错误";
        }
      );
    },
    //进入详情
    jinru(id) {
      this.$router
        .push({
          name: "xiangqing",
          query: { id: id },
        })
        .catch((err) => {
          return err;
        });
    },
    //滚动加载
    gun() {
      if (document.documentElement.scrollTop > this.$refs.shaixuan.offsetTop) {
        this.$refs.shaixuan.classList.add("guding");
        this.$refs.shangping2.style = "margin-top:80px";
      }
      if (document.documentElement.scrollTop < 195) {
        this.$refs.shaixuan.classList.remove("guding");
        this.$refs.shangping2.style = "margin-top:0px";
      }
      if (!this.on1) {
        return;
      }
      let offtop =
        document.documentElement.scrollTop +
        document.documentElement.clientHeight;
      let shangpingtop = shangping.offsetHeight;
      if (offtop > shangpingtop) {
        this.on1 = false;
        this.pageindex += 1;
        let params = {
          count: this.pageindex,
          limitNum: this.pagesize,
        };
        this.jiazai = true;
        setTimeout(() => {
          axios.get("http://121.89.205.189:3000/api/pro/list", { params }).then(
            (res) => {
              if (res.data.code == 200) {
                console.log(res.data.data);
                if (res.data.data.length == 0) {
                  window.removeEventListener("scroll", this.gun);
                  this.zhuangtai = "到底了";
                  return;
                }
                res.data.data
                  .slice(0, Math.floor(res.data.data.length / 2))
                  .forEach((item) => {
                    this.list1.push(item);
                  });
                res.data.data
                  .slice(Math.ceil(res.data.data.length / 2))
                  .forEach((item) => {
                    this.list2.push(item);
                  });
                this.jiazai = false;
                setTimeout(() => {
                  this.on1 = true;
                  this.gun();
                }, 500);
              }
            },
            (rej) => {
              this.zhuangtai = "网络错误";
            }
          );
        }, 1000);
      }
    },
    //筛选
    shaiuantiaojian(shai) {
      let params = {
        count: 1,
        limitNum: 222,
      };
      axios.get("http://121.89.205.189:3000/api/pro/list", { params }).then(
        (res) => {
          if (res.data.code == 200) {
            let arr = res.data.data.filter((item) => {
              if (shai == "sales") {
                return item[shai] >= 10000;
              }
              if (shai == "discount") {
                return item[shai] >= 8;
              }
              return item[shai];
            });
            console.log(arr);
            this.zhuangtai = "到底了";
            this.shaixuanlist = arr;
            this.list1 = this.shaixuanlist.slice(0, Math.floor(arr.length / 2));
            this.list2 = this.shaixuanlist.slice(Math.ceil(arr.length / 2));
            window.removeEventListener("scroll", this.gun);
          }
        },
        (rej) => {
          this.zhuangtai = "网络错误";
        }
      );
    },
  },
  mounted() {
    this.getList();
    this.$emit("fanhui", 0);
    window.addEventListener("scroll", this.gun);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.gun);
  },
};
</script>

<style lang="less" scoped>
.lunbo {
  width: 3.5rem;
  height: 1.4rem;
  overflow: hidden;
  margin: auto;
  border-radius: 0.15rem;
  margin-bottom: 0.1rem;
}
.lunbo2 {
  width: 100%;
  height: 1.64rem;
  overflow: hidden;
  margin: auto;
  margin-top: 5px;
}
.shangping {
  display: flex;
  position: relative;
  margin-bottom: 0.66rem;
  > div {
    width: 50%;
    > ul {
      width: 100%;
      height: 100%;
      > li {
        padding: 0.08rem;
        > dl {
          width: 100%;
          height: 100%;
          background: white;
          border-radius: 0.05rem;
          overflow: hidden;
          > dt {
            width: 100%;
            height: 1.7rem;
          }
          > dd {
            padding: 0.08rem;
            > h5 {
              height: 0.3rem;
              overflow: hidden;
              font-weight: 400;
            }
            > h4 {
              color: red;
            }
            > div {
              display: flex;
              color: #999999;
              font-size: 0.08rem;
              :nth-child(2) {
                padding: 0 0.01rem;
                margin-left: 0.02rem;
                color: red;
                border: 0.005rem solid red;
              }
            }
          }
        }
      }
    }
  }
}
.shaixuan {
  width: 100%;
  margin-bottom: 10px;
  background: white;
  height: 60px;
  > ul {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    > li {
      flex: 0 0 0.6rem;
      width: 0.6rem;
      height: 100%;
      // background: red;
      margin: 0 0.1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      > h5 {
        font-size: 0.14rem;
        text-align: center;
      }
      > p {
        font-size: 0.1rem;
        margin-top: 0.05rem;
        color: #999999;
      }
    }
  }
}
.active {
  color: orange;
  > p {
    background: orange;
    color: white !important;
    border-radius: 55px;
    padding: 0 0.05rem;
    font-size: 0.13rem;
    margin-top: 0.05rem;
  }
}
.shaixuan2 {
  width: 100%;
  margin: 10px 0;
  background: white;
  height: 30px;
  > .ul1 {
    height: 100%;
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
    align-items: center;
    > li {
      position: relative;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 0.1rem;
      font-weight: 600;
    }
  }
  > .ul2 {
    width: 100%;
    position: absolute;
    top: 0.3rem;
    > li {
      margin: 0.03rem 0;
    }
  }
}
.guding {
  position: fixed;
  top: 0;
  z-index: 99;
}
.jiazai {
  position: absolute;
  bottom: -0.25rem;
  width: 100% !important;
  height: 30px;
  text-align: center;
  // background: white;
  color: #999999;
}
</style>